<div
  v-loading="isPageLoading"
  :class="[$store.state.appPrefix + '-p-period-group-trainee', $store.state.appPrefix + '-p-period-comon']"
  data-table-extra="56">
  <div class="info-header">
    <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
    分组设置
    <div class="header-actions fr">
      <span class="actions-switch" @click="$groupTips">
        学员自选分组
        <el-switch
          v-model="infos.isSelfGroup"
          :active-value="1"
          :inactive-value="0"
          :disabled="tableList.length <= 0"
          active-color="#13ce66"
          @change="$handleSwitch">
        </el-switch>
        <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
          content="开启后，未分组的学员在进入课程前，需进行选择所属分组">
          <i slot="reference" class="el-icon-warning-outline"></i>
        </el-popover>
      </span>
      <el-button size="small" icon="el-icon-plus" type="primary" @click="$handleEdit()">添加分组</el-button>
    </div>
  </div>
  <div class="g-table-layout">  
    <div class="g-table-top g-table-top-action__flex g-table-top-action__flex--br">
      <div class="g-table-top-action__left">
        <!-- <div class="g-table-main-title">课程列表</div> -->
      </div>
      <div class="g-table-top-action__right">
        <el-search
          size="small"
          v-model="filterForm.q"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          isBasic
          @search="$search"
          @clear="() => {filterForm.q = ''; $search()}"
          placeholder="请输入分组名称">
        </el-search>
        <!-- <el-select
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="filterForm.q"
          placeholder="选择学员分组"
          clearable
          @change="$search">
          <el-option
            v-for="item in groups"
            :key="item.codeNum"
            :label="item.codeName"
            :value="item.codeNum">
          </el-option>
        </el-select> -->
        <!-- <el-button type="primary" icon="el-icon-plus" @click="$handleAdd">新增</el-button> -->
      </div>
    </div>
    <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList">
      <el-table-column
        prop="groupName"
        label="分组名称"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span>
            {{scope.row.groupName | filterBlank}}
            <el-button class="ml16" type="text" icon="el-icon-edit-outline" size="medium" @click="$handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" size="medium" @click="$handleDelete(scope.row)">删除</el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="userNum"
        label="组员人数"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <div class="group-num">
            <div class="num-txt">{{scope.row.userNum || 0}}人</div>
            <el-button class="ml16" type="text" size="medium" icon="el-icon-plus" @click="$handleGroup(scope.row)">添加</el-button>
            <el-button type="text" size="medium" icon="el-icon-minus" @click="$removeUser(scope.row)">移除</el-button>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        fixed="right"
        :width="500"
        class-name="no-ellipsis">
        <template slot-scope="scope">
          <div class="btns">
            <el-button type="text" icon="el-icon-s-tools" size="medium" @click="$handleGroup(scope.row)">设定组员（{{scope.row.userNum}}人）</el-button>
            <el-button type="text" size="medium" @click="$handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="medium" @click="$handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
  <add-dialog :dialogVisible.sync="editDialogVisible" :courseId="courseId" :groudId="editForm.groudId" :groupName="editForm.groupName" @saveSucc="$addSuccess"></add-dialog>
  <add-trainee :dialogVisible.sync="groupDialogVisible" :courseId="courseId" :groupId="groupForm.groudId" :isGroup="true" :title="groupForm.title" @saveSucc="$addTraineeSuccess"></add-trainee>
  <remove-trainee :dialogVisible.sync="removeDialogVisible" :courseId="courseId" :groupId="groupForm.groudId" :isGroup="true" :title="groupForm.title" @saveSucc="$addTraineeSuccess"></remove-trainee>
</div>
